<!--
 * Copyright © 2022
 * @Author: zhangxiang
 * @Date: 2022-11-30 19:11:42
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-09-25 18:56:56
 * @Description:
 *
-->

<template>
  <el-form
    ref="form"
    class="create-basic"
    :rules="rules"
    :model="form"
    label-width="80px"
    size="medium"
  >
    <el-form-item class="item" label="云服务商" prop="cloudProvider">
      <el-select
        v-model="form.cloudProvider"
        placeholder="请选择云服务商"
        style="width: 100%"
        :disabled="true"
      >
        <el-option
          v-for="item in cloudProviderOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item class="item right" label="云账户" prop="cloudAccountName">
      <el-select
        v-model="form.cloudAccountName"
        placeholder="请选择云账户"
        style="width: 100%"
        no-data-text="请选择云服务商"
      >
        <el-option
          v-for="item in cloudAccountNameOptions"
          :key="item.cloudAccountName"
          :label="item.cloudAccountName"
          :value="item.cloudAccountName"
        />
      </el-select>
    </el-form-item>
    <el-form-item class="item" label="主机名称" prop="vmName">
      <el-input v-model="form.vmName" placeholder="请输入主机名称" />
    </el-form-item>
    <!-- 私有云 可用域 -->
    <el-form-item class="item right" label="可用域" prop="zone">
      <el-select
        v-model="form.zone"
        placeholder="请选择可用域"
        style="width: 100%"
      >
        <el-option
          v-for="item in zoneOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item class="item" label="镜像" prop="imageOs">
      <el-select
        v-model="form.imageOs"
        placeholder="请选择操作系统"
        style="width: 100%"
      >
        <el-option
          v-for="item in imageOsOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item class="item right" label-width="0px" label="" prop="imageId">
      <el-select
        v-model="form.imageId"
        placeholder="请选择相应镜像"
        no-data-text="请选择合适的账户"
        style="width: 100%"
        filterable
      >
        <el-option
          v-for="item in imageIdOptions"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="规格" prop="flavorId">
      <el-row type="flex" justify="center">
        <el-select
          v-model="flavorSelector.cpuCount"
          placeholder="请选择vCPUs"
          style="flex: 1; margin-right: 10px"
        >
          <el-option
            v-for="item in cpuCountOptions"
            :key="item.value"
            :label="item.label + 'vCPUs'"
            :value="item.value"
          />
        </el-select>
        <el-select
          v-model="flavorSelector.memSize"
          placeholder="请选择内存"
          style="flex: 1; margin-right: 10px"
        >
          <el-option
            v-for="item in memSizeOptions"
            :key="item.value"
            :label="item.label + 'GiB'"
            :value="item.value"
          />
        </el-select>
        <el-select
          v-model="form.flavorId"
          placeholder="请选择规格"
          no-data-text="请选择合适的过滤条件"
          style="flex: 2"
        >
          <el-option
            v-for="item in flavorIdOptions"
            :key="item.id"
            :label="
              item.name + ' (' + item.cpuCount + 'C | ' + item.memSize + 'G)'
            "
            :value="item.id"
          />
        </el-select>
      </el-row>
    </el-form-item>
    <el-form-item label="描述" prop="desc">
      <el-input
        v-model="form.desc"
        placeholder="请输入描述"
        type="textarea"
        :rows="3"
      />
    </el-form-item>
  </el-form>
</template>

<script>
import resSelectorMixin from '@/views/mixin/resSelector.js'
import {
  queryImage,
  queryInstanceType,
  getPrivateZones
} from '@/api/cn-resource'
import {
  CLOUD_OPENSTACK_IMAGE_OS,
  CPU_ARCH,
  VCPUS,
  MEM_SIZE
} from '@/utils/constant'

export default {
  name: 'CreateBasicOpenstack',
  components: {},
  mixins: [resSelectorMixin],
  props: {
    cloudSelect: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      zoneOptions: [],
      imageOsOptions: CLOUD_OPENSTACK_IMAGE_OS,
      imageIdOptions: [],
      flavorIdOptions: [],
      cpuArchOptions: CPU_ARCH,
      cpuCountOptions: VCPUS,
      memSizeOptions: MEM_SIZE,
      flavorSelector: {
        cpuArch: '',
        cpuCount: '',
        memSize: ''
      },
      form: {
        cloudProvider: '', // 云服务商
        cloudAccountName: '', // 云账户
        vmName: '', // 主机名称
        chargeType: '', // 计费模式
        zone: '', // 可用区
        imageOs: CLOUD_OPENSTACK_IMAGE_OS[0].value, // 镜像系统
        imageId: '', // 镜像
        flavorId: '', // 规格
        sysDiskType: '', // 系统盘
        sysDiskSize: '40', // 系统盘大小
        desc: '' // 描述
      },
      rules: {
        cloudProvider: [
          { required: true, message: '请选择云服务商', trigger: 'change' }
        ],
        cloudAccountName: [
          { required: true, message: '请选择云账户', trigger: 'change' }
        ],
        vmName: [
          { required: true, message: '请输入主机名称', trigger: 'blur' }
        ],
        chargeType: [
          { required: true, message: '请选择计费模式', trigger: 'change' }
        ],
        zone: [{ required: true, message: '请选择可用区', trigger: 'change' }],
        imageOs: [
          { required: true, message: '请选择操作系统', trigger: 'change' }
        ],
        imageId: [
          { required: true, message: '请选择相应镜像', trigger: 'change' }
        ],
        flavorId: [
          { required: true, message: '请选择规格', trigger: 'change' }
        ],
        sysDiskType: [
          { required: true, message: '请选择系统盘', trigger: 'change' }
        ],
        sysDiskSize: [
          { required: true, message: '请输入系统盘大小', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {},
  watch: {
    flavorSelector: {
      handler(newVal) {
        if (newVal.cpuArch || newVal.cpuCount || newVal.memSize) {
          // 刷新规格
          this.form.flavorId = ''
          this.getFlavorList()
        }
      },
      deep: true
    },
    /**
     * @description: 镜像系统监听
     * @return {*}
     */
    'form.imageOs': {
      handler(newVal) {
        if (newVal) {
          this.form.imageId = ''
          this.getImageList()
        }
      },
      immediate: true
    },
    /**
     * @description: 云账户监听
     * @return {*}
     */
    'form.cloudAccountName': {
      handler(newVal) {
        if (newVal) {
          // 私有云
          // 请求可用域
          this.form.zone = ''
          this.getPrivateZones()
          // 刷新镜像
          this.form.imageId = ''
          this.getImageList()
          // 刷新规格
          this.form.flavorId = ''
          this.getFlavorList()
        }
      },
      immediate: true
    },
    cloudSelect: {
      handler(newVal) {
        if (newVal) {
          this.form.cloudProvider = this.cloudSelect
        }
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    /**
     * @description: 获取私有云可用域
     * @return {*}
     */
    getPrivateZones() {
      getPrivateZones({
        cloudAccountName: this.form.cloudAccountName
      }).then((res) => {
        const zones =
          res.data && Array.isArray(res.data.zones) ? res.data.zones : []
        this.zoneOptions = zones.map((item) => {
          return {
            value: item,
            label: item
          }
        })
      })
    },
    /**
     * @description: 获取规格
     * @return {*}
     */
    getFlavorList() {
      queryInstanceType({
        cloudProvider: this.form.cloudProvider,
        cloudAccountName: this.form.cloudAccountName,
        cpuArch: this.flavorSelector.cpuArch,
        cpuCount: this.flavorSelector.cpuCount,
        memSize: this.flavorSelector.memSize
      }).then((res) => {
        this.flavorIdOptions = Array.isArray(res.data) ? res.data : []
      })
    },
    /**
     * @description: 获取镜像
     * @return {*}
     */
    getImageList() {
      queryImage({
        cloudProvider: this.form.cloudProvider,
        cloudAccountName: this.form.cloudAccountName,
        osPlatform: this.form.imageOs
      }).then((res) => {
        this.imageIdOptions = Array.isArray(res.data) ? res.data : []
      })
    },
    /**
     * @description: 校验
     * @return {*}
     */
    validateForm(callback) {
      this.$refs.form.validate((valid, obj) => {
        if (valid) {
          const extraForm = this.getExtraForm()
          callback({
            isCloudPublic: this.isCloudProviderPublic,
            ...extraForm,
            ...this.form
          })
        }
      })
    },
    /**
     * @description: 获取表单参数额外展示的数据
     * @return {*}
     */
    getExtraForm() {
      // 获取flavorDetail
      const flavorSelect = this.flavorIdOptions.find((item) => {
        return this.form.flavorId === item.id
      })
      const flavorDetail = flavorSelect
        ? flavorSelect.name +
          ' (' +
          flavorSelect.cpuCount +
          'C | ' +
          flavorSelect.memSize +
          'G' +
          (flavorSelect.gpu ? ' | ' + flavorSelect.gpu : '') +
          (flavorSelect.gpuMemSize ? ' | ' + flavorSelect.gpuMemSize : '') +
          ')'
        : ''
      // 获取imageDetail
      const imageSelect = this.imageIdOptions.find((item) => {
        return this.form.imageId === item.id
      })
      const imageDetail = imageSelect ? imageSelect.name : ''
      // 获取zoneText
      const zoneSelect = this.zoneOptions.find((item) => {
        return this.form.zone === item.key
      })
      const zoneText = zoneSelect ? zoneSelect.text : ''
      return {
        flavorDetail,
        imageDetail,
        zoneText
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.create-basic {
  .item {
    display: inline-block;
    width: calc(50% - 12.5px);
    &.right {
      margin-left: 25px;
    }
    &.sysDiskSize {
      /deep/ .el-form-item__content {
        margin-left: 5px !important;
      }
    }
  }
}
</style>
